<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <!-- 引入 jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button>发送 GET 请求</button>
    <button>发送 POST 请求</button>
    <button>响应 JSON </button>

    <script>
        //获取元素 绑定事件
        $('button').eq(0).click(function(){
            //发送 GET 请求
            // $.get(url, data, callback, type);  
            $.get('http://127.0.0.1/server', {a: 100, b: 200}, function(data){
                //回调函数 处理响应体结果
                console.log(data);
            });
        });

        $('button').eq(1).click(function(){
            //发送 POST 请求
            $.post('http://127.0.0.1/server', {c: 300, d: 400}, function(data){
                console.log(data);
            });
        })

        //JSON 响应的情况
        $('button').eq(2).click(function(){
            $.get('http://127.0.0.1/json-server', {e: 500}, function(data){
                console.log(data);
            })
        })

    </script>
    
</body>
</html>